<template>
  <div class="m-headerLayout">
    <div class="container">

        <router-link to="/home" class="u-logo-header">
          <img src="../assets/img/logo.png" alt="工流界商城" title="工流界商城" style="width:300px">
      </router-link>

      <div class="f-search-top" id="J-search-mod">

        <div class="m-nav-search">

          <div class="mod">
            <div class="u-searchMod">
              <input type="text" v-model="params.search" id="txtKeyword" placeholder="请输入搜索关键词" @input="fetchProducts" @focus="showSelect = true" />
               <!-- <router-link :to="`/select?series=${item.id}`" target="_blank"> -->

                <router-link :to="`/select?search=${params.search}&type=2&name`" >
                 <button class="btn" id="btnKeySearch">
                <svg-icon icon-class="sousuo" class-name="sousuo" />
                </button>
                </router-link>

            </div>
            <div  class="btn-extra" @click="gotoCart">
              <svg-icon style="margin-bottom: -1px" icon-class="piliang" class-name="piliang" />
              <span>快速下单</span>
            </div>
          </div>
          <!-- <div class="u-searchHotWord">
            <router-link v-for="item in hots" :key="item.id" :to="`/select?search=${item.name}&type=1`"  target="_blank">
              <em>{{item.name}}</em>
            </router-link>
          </div> -->
        </div>
      </div>
      <div v-if="showSelect && products.length && params.search != ''" class="s-realut-box">
        <ul id="eleSearchTagList">
          <li v-for="item in products" :key="item.id">
            <div class="item" @click="goDetail(item.id)">
              {{item.brand_name}}&nbsp;&nbsp;
              {{item.category_name}}&nbsp;&nbsp;
              {{item.series_name}}&nbsp;&nbsp;
              {{item.model_name}}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { searchHots } from '@/api/home'
import { products } from '@/api/goods'
export default {
  name: 'Search',
  data () {
    return {
      hots: [],
      products: [],
      showSelect: false,
      params: {
        page: '1', // 分页
        search: '' // title 模糊匹配
      }
    }
  },
  computed: {
    ...mapGetters(['phone'])
  },
  created () {
    this.fetchSearchHots()
    this.params.search = sessionStorage.getItem('SEARCH_NAME')
  },
  methods: {
    async fetchProducts () {
      sessionStorage.setItem('SEARCH_NAME', this.params.search)
      if (!this.params.search) return
      this.products = []
      const res = await products(this.params)
      this.products = res.data
    },
    async fetchSearchHots () {
      this.hots = await searchHots()
    },
    gotoCart () {
      if (!this.phone) {
        if (this.$route.path === '/login') return
        this.$router.push('/login')
      } else {
        this.$router.push('/cart')
      }
    },
    goDetail (id) {
      this.$router.push(`/detail/${id}`)
      this.showSelect = false
      this.params.search = ''
      this.products = []
    }
  }
}
</script>

<style scoped lang="scss">
.m-headerLayout {
  position: relative;
  min-width: 1200px;
  height: 138px;
  z-index: 9;
  box-sizing: border-box;
  background: #fff;
  .container {
    position: relative;
    height: 138px;
    .u-logo-header {
      position: absolute;
      width: 223px;
      height: 138px;
      left: 0;
      padding: 50px 10px 46px;
      box-sizing: border-box;
      text-align: center;
      img {
        width: 100%;
      }
    }
    .m-nav-search {
      float: left;
      margin: 47px 0 0 478px;
      -webkit-transition: none;
      -o-transition: none;
      transition: none;
      .mod {
        overflow: hidden;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        .u-searchMod {
          float: left;
          border: 3px solid #4448f8;
          border-radius: 3px;
          position: relative;
          input {
            float: left;
            width: 427px;
            height: 31px;
            line-height: 31px;
            border-radius: 3px;
            padding: 0 18px;
            background-color: transparent;
          }
          input[type="text"], input[type="button"], input[type="submit"], input[type="number"] {
            -webkit-appearance: none;
            outline: none;
            border: none;
          }
          .btn {
            float: left;
            width: 90px;
            height: 31px;
            line-height: 31px;
            text-align: center;
            font-size: 25px;
            color: #fff;
            background: #4448f8;
            border: none;
            cursor: pointer;
            .sousuo {
              font-size: 25px;
              font-family: 'icomoon'!important;
              speak: none;
              font-style: normal;
              font-weight: normal;
              font-variant: normal;
              text-transform: none;
              line-height: 1;
              -webkit-font-smoothing: antialiased;
            }
          }
        }
        .btn-extra {
          float: left;
          width: 138px;
          height: 37px;
          line-height: 35px;
          color: #fff;
          font-size: 14px;
          text-align: center;
          margin-left: 19px;
          border-radius: 3px;
          background: red;
          cursor: pointer;
          .svg-icon{
            margin-right: 8px;
            font-size: 17px;
          }
        }
        #toDesktop {
          background: #4448f8;
        }
      }
    .u-searchHotWord {
        color: #474e56;
        overflow: hidden;
        a:first-child {
          padding-left: 0;
        }
        a {
          float: left;
          position: relative;
          padding: 5px 10px;
          color: #474e56;
          em {
            display: inline-block;
            -webkit-transform: scale(.9);
            -ms-transform: scale(.9);
            -o-transform: scale(.9);
            transform: scale(.9);
          }
        }
        a:after {
          position: absolute;
          content: '';
          left: 0;
          width: 1px;
          height: 10px;
          top: 50%;
          margin-top: -5px;
          background: #adafb1;
        }
        a:hover {
          color: #4448f8;
        }
    }
  }
  }
  .search-list {
    position: absolute;
    width: 100%;
    top: 31px;
    background-color: white;
    z-index: 100;
    li {
      line-height: 31px;
    }
  }
  .s-realut-box{ position: absolute; left: 472px;top: 100px; width: 570px;  background:#fff; border:1px solid #e6e6e6; overflow:hidden; box-sizing:border-box; z-index:9999;}
  .s-realut-box ul { overflow:auto;z-index:999;}
  .s-realut-box ul li {  height:30px; line-height:30px; cursor:pointer;}
  .s-realut-box ul li.active{ background-color:#f2f2f2;}
  .s-realut-box ul li:hover{ background-color:#f2f2f2;}
  .s-realut-box ul li .item { padding-left:10px; display:block; width:540px; overflow: hidden;text-overflow:ellipsis; white-space:nowrap;}

}
.m-headerLayout{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}
</style>
